import React, { Component, Fragment } from 'react';
import { Layout, Button, Icon, Menu, Modal } from 'antd';
import Login from '../routes/Login';
import { connect } from 'dva';
import { withRouter, routerRedux } from 'dva/router';
import styles from './Navigation.css';
import EmptyForm from '../components/BuyFormEmpty';
const { Content, Sider } = Layout;
const MenuItem = Menu.Item;
const ButtonGroup = Button.Group;
class Navigation extends Component {
  render(){
    const { children, navigation, indexPage, dispatch, location: { pathname } } = this.props;
    const { 
      name
    } = indexPage;
    const { visible, type, administrator, isLogin, loading } = navigation;
    return (
      <Fragment>
        {
          isLogin ? <Layout className={ styles.normal }>
          <Sider className={ styles.sider }>
            <div className={ styles.user}>
              <p><Icon type="line-chart" theme="outlined" /> {name}</p>
              <p>用户类型：{administrator ? "超级用户" : "普通用户"}</p>
              <p><a onClick={()=>dispatch({ type : "navigation/signOutSystem" })}>退出登录</a></p>
            </div>
            <Menu
              mode="inline"
              theme="dark"
              selectedKeys={[pathname]}
            >
              <MenuItem key="/home" onClick={()=>dispatch(routerRedux.push("/home"))}>信号和持仓</MenuItem>
              <MenuItem key="/history" onClick={()=>dispatch(routerRedux.push("/history"))}>历史明细</MenuItem>
            </Menu>
            <ButtonGroup className={ styles.btnBox }>
              <Button
                type="primary"
                onClick={()=>dispatch({ type : "navigation/showModal", payload : 1 })}
              >买入</Button>
              <Button
                style={{
                  background : "#a0d468",
                  color : "#fff",
                  borderColor : "#8cc152"
                }}
                onClick={()=>dispatch({ type : "navigation/showModal", payload : 0 })}
              >卖出</Button>
            </ButtonGroup>
          </Sider>
          <Layout>
            <Content>
              { children }
            </Content>
          </Layout>
          <Modal
            visible={visible}
            destroyOnClose
            footer={null}
            onCancel={()=>dispatch({type:"navigation/hideModal"})}
          >
            <EmptyForm 
              onCancel={()=>dispatch({
                type:"navigation/hideModal"
              })}
              onOk={(opt)=>dispatch({ 
                type :"navigation/buyOrSale",
                payload : opt
              })}
              type={type}
            />
          </Modal>
        </Layout> : <Login loading={loading}/>
        }
      </Fragment>
    )
  }
}

export default withRouter(connect(({ navigation, indexPage })=>({ navigation, indexPage }))(Navigation))